import React, { Component, useState } from 'react';
import { connect } from 'react-redux';
import { Button, Modal, Form, Input, Radio } from 'antd';
import action from '../../../store/action';

const {TextArea}=Input;
const CollectionCreateForm = ({ visible, onCreate, onCancel }) => {
    const [form] = Form.useForm();
    return (
        <Modal
            visible={visible}
            title="添加单位信息"
            okText="提交"
            cancelText="取消"
            onCancel={onCancel}
            onOk={() => {
                form
                    .validateFields()
                    .then(values => {
                        form.resetFields();
                        onCreate(values);
                    })
                    .catch(info => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                form={form}
                layout="vertical"
                name="form_in_modal"
                initialValues={{
                    modifier: 'public',
                }}
            >
                <div className="add_flex">
                    <Form.Item
                        name="title"
                        label="单位名称:"
                        rules={[
                            {
                                required: true,
                                message: '内容不能为空!',
                            },
                        ]}
                    >
                        <Input placeholder='请输入单位名称' />
                    </Form.Item>

                    <Form.Item name="address" label="地址:" rules={[
                        {
                            required: true,
                            message: '内容不能为空!',
                        },
                    ]}>
                        <Input type="textarea" placeholder='请输入详细地址' />
                    </Form.Item>
                </div>
                <div className='add_flex'>
                    <Form.Item name="tel" label="联系电话:" rules={[
                        {
                            required: true,
                            message: '内容不能为空!',
                        },
                    ]}>
                        <Input type="textarea" placeholder='请输入联系电话' />
                    </Form.Item>
                    <Form.Item name="fax" label="传真:" rules={[
                        {
                            required: true,
                            message: '内容不能为空!',
                        },
                    ]}>
                        <Input type="textarea" placeholder='请输入传真' />
                    </Form.Item>
                </div>
                <div className='add_flex'>
                    <Form.Item name="homePage" label="主页:" rules={[
                        {
                            required: true,
                            message: '内容不能为空!',
                        },
                    ]}>
                        <Input type="textarea" placeholder='请输入主页地址' />
                    </Form.Item>
                    <Form.Item name="email" label="邮箱:" rules={[
                        {
                            required: true,
                            message: '内容不能为空!',
                        },
                    ]}>
                        <Input type="textarea" placeholder='请输入邮箱地址' />
                    </Form.Item>
                </div>
                <div className='add_flex'>
                    <Form.Item name="memo" label="备注:" rules={[
                        {
                            required: true,
                            message: '内容不能为空!',
                        },
                    ]}>
                        <Input type="textarea" placeholder='请输入备注' />
                    </Form.Item>
                    <Form.Item name="code" label="邮编:" rules={[
                        {
                            required: true,
                            message: '内容不能为空!',
                        },
                    ]}>
                        <Input type="textarea" />
                    </Form.Item>
                </div>
                <Form.Item name="intro" label="简介:" style={{ width: '40%', marginLeft: '5%' }}>
                    <TextArea allowClear autoSize={true} />
                </Form.Item>

            </Form>
        </Modal>
    );
};

const CollectionsPage = (props) => {
    const [visible, setVisible] = useState(false);

    const onCreate = values => {
        setVisible(false);
        props.item(values)
    };

    return (
        <div style={{ marginBottom: 10 }}>
            <Button
                type="primary"
                onClick={() => {
                    setVisible(true);
                }}
                style={{ width: '100px' }}
            >
                添加
      </Button>
            <CollectionCreateForm
                visible={visible}
                onCreate={onCreate}
                onCancel={() => {
                    setVisible(false);
                }}
            />
        </div>
    );
};

class index extends React.Component {
    constructor() {
        super();
    }
    render() {
        return <CollectionsPage item={(val) => this.handel_add(val)} />
    }
    handel_add = (e) => {
        const list = {
            pname: e.title,
            memo: e.memo,
            address: e.address,
            postalCode: e.code,
            tel: e.tel,
            fax: e.fax,
            homePage: e.homePage,
            email: e.email,
            intro: e.intro
        }
        this.$axios.get('/manager/api/isOrganizationNameExist', this.$qs.stringify({ name: e.title })).then((res) => {
            if (res) {
                this.$axios.post('/manager/api/addOrganization', list).then((res) => {
                    if (res.status === 1) {
                        this.$axios.get('/manager/api/getAllOrganizationList').then((res) => {
                            const { home_get } = this.props;
                            let new_list = {};
                            [].push.apply(new_list, res.organizationList);
                            home_get(new_list);
                        }).catch((err) => {
                            console.log(err);
                        })
                    }
                }).catch((err) => {
                    console.log(err);
                })
            }
        }).catch((err) => {
            console.log(err);

        })
    }
}

export default connect(state => ({ ...state.custom }), action.custom)(index);